<template>
  <div class="loginContainer">
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      class="loginForm"
      :rules="rules"
    >
      <h2 class="loginTitle">一点冰管理系统</h2>

      <div class="loginForm1">
        <el-form-item label="账号" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            id="FangShuiFang"
            type="primary"
            @click="submitLoginForm('form')"
            >登录</el-button
          >
          <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
import { login,getUserName } from "@/api/login";

export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 3,
            max: 18,
            message: "长度应在3到18个字符之间",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 18,
            message: "长度应在3到18个字符之间",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitLoginForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var that = this.form;

          var captcha = new TencentCaptcha(
            document.getElementById("FangShuiFang"),
            "1305000665",
            (res) => {
              if (res.ret == 0) {
                login(that.username, that.password).then((response) => {
                  if (response.data.code == 200) {
                    sessionStorage.setItem("userId", response.data.message);
                    getUserName(response.data.message).then((response) =>{
                      sessionStorage.setItem("userName",response.data.ename)
                    })
                    this.$router.push("/");
                  } else {
                    this.$message({
                      message: response.data.message,
                      type: "error",
                    });
                  }
                });
              } else {
                console.log("验证不对，不能跳转");
              }
            }
          );
          captcha.show();
        } else {
          console.log("不合法!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style scoped>
.loginContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #2a4b6c;
}
.loginForm {
  width: 350px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(255, 255, 255, 0.8);
  border-radius: 20px;
}
.loginForm1 {
  padding: 0px 40px 5px 0px;
}
.loginTitle {
  text-align: center;
  padding: 20px;
}
</style>